<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleform" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>

    <el-form-item label="客户类型" prop="clientType">
      <el-radio-group v-model="ruleform.clientType">
        <el-radio value="个人">个人</el-radio>
        <el-radio value="企业">企业</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="负责人手机号" prop="clientTell">
      <el-input v-model="ruleform.clientTell" />
    </el-form-item>

    <el-form-item label="负责人姓名" prop="clientPro">
      <el-input v-model="ruleform.clientPro" />
    </el-form-item>

    <el-form-item label="客户名称" prop="clientName">
      <el-input v-model="ruleform.clientName" />
    </el-form-item>

    <el-form-item label="身份证" prop="clientCard">
      <el-input v-model="ruleform.clientCard" />
    </el-form-item>

    <el-form-item label="详细地址" prop="clientAdd">
      <BMap :center="point || '北京市'">
        <!-- <BZoom /> -->
        <BAutoComplete style="width: 100%" @confirm="handleConfirm" />
        <BMarker v-if="point" :position="point"></BMarker>
      </BMap>
    </el-form-item>

    <el-form-item label="所属行业" prop="clientWork">
      <el-input v-model="ruleform.clientWork"   placeholder="请选择所属行业"/>
    </el-form-item>
    <el-form-item label="统一社会信用代码" prop="clientXin">
      <el-input v-model="ruleform.clientXin"  placeholder="请选择统一社会信用代码" />
    </el-form-item>
    <el-form-item label="助记码" prop="clientHelp">
      <el-input v-model="ruleform.clientHelp" />
    </el-form-item>
    <el-form-item label="客户归集档案" prop="clientHome">
      <el-switch v-model="ruleform.clientHome" placeholder="请选择客户归集档案" />
    </el-form-item>
    <el-form-item label="客户阶段" prop="clientClass">
      <el-input v-model="ruleform.clientClass" />
    </el-form-item>
    <el-form-item label="客户自定义标题" prop="clientTitel">
      <el-input v-model="ruleform.clientTitel" />
    </el-form-item>
    <el-form-item label="意向产品" prop="clientCp">
      <el-input v-model="ruleform.clientCp" />
    </el-form-item>
    <el-form-item label="合作日期" prop="clientTime">
      <el-input v-model="ruleform.clientTime" />
    </el-form-item>

    <el-form-item label="所属单位" prop="clientDw">
      <el-input v-model="ruleform.clientDw" />
    </el-form-item>
    <el-form-item label="使用状态" prop="clientSmark">
      <el-radio-group v-model="ruleform.clientSmark">
        <el-radio value="使用">使用</el-radio>
        <el-radio value="代用">代用</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item label="上级客户" prop="clientUp">
      <el-select v-model="ruleform.clientUp" placeholder="请选择上级客户">
        <el-option label="1" value="1" />
        <el-option label="2" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="客户级别" prop="clientClient">
      <el-select v-model="ruleform.clientClient" placeholder="请选择客户级别">
        <el-option label="1" value="1" />
        <el-option label="2" value="2" />
        <el-option label="3" value="3" />
      </el-select>
    </el-form-item>


    <el-form-item label="备注" prop="clientBsmark">
      <el-input v-model="ruleform.clientBsmark" type="textarea"  />
    </el-form-item>
    <h3>服务人员</h3>

    <el-form-item label="所属市场" prop="clientShop">
      <el-select v-model="ruleform.clientShop" placeholder="请选择所属市场">
        <el-option label="豫北市场" value="豫北市场" />
        <el-option label="郑州市场" value="郑州市场" />
      </el-select>
    </el-form-item>

    <el-form-item label="业务员" prop="clientGrander">
      <el-select v-model="ruleform.clientGrander" placeholder="请选择业务员">
        <el-option label="小楚" value="小楚" />
        <el-option label="小高" value="小高" />
      </el-select>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" style="margin-left: 300px;" @click="submitForm(ruleFormRef)">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { BMap, BAutoComplete, BMarker, type Point, useAddressGeocoder } from 'vue3-baidu-map-gl'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const { get, point } = useAddressGeocoder<Point>()

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>()
//响应式数据  添加
const ruleform = reactive({
  clientId:'',
  clientType:'',
  clientTell:'',
  clientPro:'',
  clientName:'',
  clientCard:'',
  clientAdd:'',
  clientWork:'',
  clientXin:'',
  clientHelp:'',
  clientHome:'',
  clientClass:'',
  clientTitel:'',
  clientCp:'',
  clientTime:'',
  clientDw:'',
  clientSmark:'',
  clientUp:'',
  clientClient:'',
  clientBsmark:'',
  clientShop:'',
  clientGrander:'',

});

//百度地图获取
const handleConfirm=(e:any)=> {
  console.log(e)
  const value = e.item.value
  ruleform.clientAdd=value.province + value.city + value.district + value.street + value.business;
}

const route = useRoute();
const router = useRouter();



//保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // ruleform.delivery==true?ruleform.defunctEnterprise=2:ruleform.defunctEnterprise=1
      axios
        .post(apiUrl+"/api/Client/addClien", ruleform)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage.success("添加成功");
            // router.push("/EnterpriseShow");
          } else {
            ElMessage.error("添加失败");
          }
        });
    }
  });
};
</script>



